<template>
   <!-- 新建日记 -->
   <div class="notes">
      <input type="file" @change="upImg" id="upimg" style="display: none">
      <quill-editor class="editor" ref="myTextEditor" :value="content" :options="editorOption"
         @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)"
         @change="onEditorChange($event)">
      </quill-editor>
   </div>
</template>
 
<script>
import axios from 'axios';

const toolbarOptions = [
   ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
   ["blockquote", "code-block"], // 引用  代码块
   [{ header: 1 }, { header: 2 }], // 1、2 级标题
   [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
   [{ script: "sub" }, { script: "super" }], // 上标/下标
   [{ indent: "-1" }, { indent: "+1" }], // 缩进
   [{ 'direction': 'rtl' }],                         // 文本方向
   [{ size: ["small", "large", "huge", false] }], // 字体大小
   [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
   [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
   [{ font: [] }], // 字体种类
   [{ align: [] }], // 对齐方式
   ["clean"], // 清除文本格式
   ["link", "image", "video"], // 链接、图片、视频
]

export default {
   props: {
      content: {
         type: String,
         require: true,
         default: '',
      },
      baseUrl: {
         type: String,
         require: true,
         default: '',
      }
   },
   data() {
      return {
         editorOption: {
            modules: {
               toolbar: {
                  container: toolbarOptions, // 工具栏
                  handlers: {
                     image: function (value) {
                        if (value) {
                           // 劫持原来的图片点击按钮事件
                           // document.querySelector('#upimg button').click()
                           $('#upimg').click()
                        } else {
                           this.quill.format('image', false)
                        }
                     }
                  }
               }
            },
            placeholder: '请在这里添加产品描述', //提示
            readyOnly: false, //是否只读
            theme: 'snow', //主题 snow/bubble
            syntax: true, //语法检测
         }
      }
   },
   methods: {
      upImg(e) {
         let file = e.target.files[0]
         console.log(file)
         this.uploads(file)
      },
      async uploads(file) {
         let quill = this.$refs.myTextEditor.quill
         let param = new FormData()
         param.append("file", file)
         axios.post(this.baseUrl + '/index/upload/upload', param, { 'Content-Type': 'multipart/form-data' })
            .then(res => {
               console.log(res.data)
               // 获取光标所在位置
               let length = quill.getSelection().index
               // 插入图片，res为服务器返回的图片链接地址
               quill.insertEmbed(length, 'image', 'http://' + res.data.data)
               // 调整光标到最后
               quill.setSelection(length + 1)
            })
            .catch(err => {
               console.log(err)
            })
      },
      // 失去焦点
      onEditorBlur(editor) { },
      // 获得焦点
      onEditorFocus(editor) { },
      // 开始
      onEditorReady(editor) { },
      // 值发生变化
      onEditorChange(editor) {
         this.$emit("func", editor.html)
      }
   },
   computed: {
      editor() {
         return this.$refs.myTextEditor.quillEditor;
      }
   },
   mounted() {

   }
}
</script>
 
<style lang="scss" scoped>
.notes {
   margin-top: 40rem;
   margin-bottom: 40rem;
   // background: #F6F4EC;
   // box-shadow: 0 0 15rem 0 #ccc;

   .editor {
      line-height: normal !important;
      height: 400rem;

   }

   .ql-snow .ql-tooltip[data-mode=link]::before {
      content: "请输入链接地址:";
   }

   .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
      border-right: 0rem;
      content: '保存';
      padding-right: 0rem;
   }

   .ql-snow .ql-tooltip[data-mode=video]::before {
      content: "请输入视频地址:";
   }

   .ql-snow .ql-picker.ql-size .ql-picker-label::before,
   .ql-snow .ql-picker.ql-size .ql-picker-item::before {
      content: '14rem';
   }

   .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
   .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
      content: '10rem';
   }

   .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
   .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
      content: '18rem';
   }

   .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
   .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
      content: '32rem';
   }

   .ql-snow .ql-picker.ql-header .ql-picker-label::before,
   .ql-snow .ql-picker.ql-header .ql-picker-item::before {
      content: '文本';
   }

   .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
   .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
      content: '标题1';
   }

   .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
   .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
      content: '标题2';
   }

   .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
   .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
      content: '标题3';
   }

   .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
   .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
      content: '标题4';
   }

   .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
   .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
      content: '标题5';
   }

   .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
   .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
      content: '标题6';
   }

   .ql-snow .ql-picker.ql-font .ql-picker-label::before,
   .ql-snow .ql-picker.ql-font .ql-picker-item::before {
      content: '标准字体';
   }

   .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
   .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
      content: '衬线字体';
   }

   .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
   .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
      content: '等宽字体';
   }
}
</style>